<div class="outer-container" *ngIf="!isLoading">
  <div>
    <div class="section-title">Top Albums</div>
    <div class="container">
      <div *ngFor="let data of topAlbums; let i = index">
        <app-album-preview
          [albumData]="data"
          [rank]="i+1"
        >
        </app-album-preview>
      </div>
    </div>
  </div>

  <div>
    <div class="section-title">Top Playlists</div>
    <div class="container">
      <div *ngFor="let data of topPlaylists; let i = index">
        <app-playlist-preview
          [playlistData]="data"
          [rank]="i+1"
        >
        </app-playlist-preview>
      </div>
    </div>
  </div>

  <div>
    <div class="section-title">Top Songs</div>
    <div class="top-songs-container">
      <app-song
        *ngFor="let songData of topSongs; let i = index"
        [songData]="songData"
        [rank]="i+1"
        (uponPlay)="playSong( i )"
      >
      </app-song>
    </div>
  </div>

</div>
<mat-spinner class="spinner" *ngIf="isLoading"></mat-spinner>